<template>
<div class="inter">
  <div style="background: #fff;width: 100%;overflow: hidden; border-radius: 5px">
    <div class="main">
        <div class="item1">
          <svg class="icon-shangji" aria-hidden="true">
            <use xlink:href="#icon-shangji-copy"></use>
          </svg>
            <!--<p class="p1" style="margin-left: 20px">{{item.name}}的上级</p>-->
          <p class="p1" style="margin-left: 20px">{{this.$store.state.login.userName}}的上级</p>
        </div>
    </div>
    <!--<div class="main1">-->
    <div class="divider"></div>
    <div class="grade">
      <p class="down">上二级</p>
      <p class="id" v-if="UP.up_two">ID:{{UP.up_two.uid}}</p>
      <p class="id" v-if="!(UP.up_two)">无</p>
      <svg class="icon-right" aria-hidden="true" style="margin-top: 0vw">
        <use xlink:href="#icon-qb_gd"></use>
      </svg>
    </div>
    <div class="divider"></div>
    <div class="grade">
      <p class="down">上一级</p>
      <p class="id" v-if="UP.up_first">ID:{{UP.up_first.uid}}</p>
      <p class="id" v-if="!(UP.up_first)">无</p>
      <svg class="icon-right" aria-hidden="true" style="margin-top: 0vw">
        <use xlink:href="#icon-qb_gd"></use>
      </svg>
    </div>
  </div>
  <div class="space"></div>
  <div style="background: #fff;width: 100%;overflow: hidden; border-radius: 5px">
    <div class="main">
      <div class="item1">
        <svg class="icon-shangji" aria-hidden="true">
          <use xlink:href="#icon-shangji-copy1"></use>
        </svg>
        <p class="p1" style="margin-left: 20px">{{this.$store.state.login.userName}}的下级</p>
      </div>
    </div>
    <div class="out">
      <div class="divider"></div>
      <div class="grade">
        <p class="down">下一级</p>
        <p class="id" v-if="DOWN.down_first.length > 0">ID:{{DOWN.down_first[0]}}</p>
        <p class="id" v-if="!(DOWN.down_first.length > 0)">无</p>
        <div class="select"  @click="select(DOWN.down_first[0])">
          <svg class="icon-right" aria-hidden="true">
            <use xlink:href="#icon-qb_gd"></use>
          </svg>
        </div>
      </div>
      <div v-if="DOWN.down_first.length > 0" v-for="(item , index) in DOWN.down_first" :key=index >
        <div class="divider"></div>
        <div class="grade" v-if="index > 0">
          <p class="id">ID:{{item}}</p>
          <div class="select"  @click="select(item)">
            <svg class="icon-right" aria-hidden="true">
              <use xlink:href="#icon-qb_gd"></use>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div  class="out">
      <div class="divider"></div>
      <div class="grade">
        <p class="down">下二级</p>
        <p class="id" v-if="DOWN.down_second.length > 0">ID:{{DOWN.down_second[0]}}</p>
        <p class="id" v-if="!(DOWN.down_second.length > 0)">无</p>
        <div class="select" @click="select(DOWN.down_second[0])">
          <svg class="icon-right" aria-hidden="true">
            <use xlink:href="#icon-qb_gd"></use>
          </svg>
        </div>
      </div>
      <div v-if="DOWN.down_second.length > 0" v-for="(item , index) in DOWN.down_second" :key=index >
        <div class="divider"></div>
        <div class="grade" v-if="index > 0">
          <p class="id">ID:{{item}}</p>
          <div class="select" @click="select(item)">
            <svg class="icon-right" aria-hidden="true">
              <use xlink:href="#icon-qb_gd"></use>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script type="text/ecmascript-6">
    import MemSearchItemTop from '@/components/spread/MemSearchItemTop';

    export default {
        name: `member-list-item-new`,
        props: {
          UP: {
            type: Object
          },
          DOWN: {
            type: Object
          },
          index: {
              type: Number
          }
        },
        components: {MemSearchItemTop},
        data() {
            return {
            };
        },
        created() {
          console.log('src/components/user/Memberlimkw', this.UP, this.DOWN);
        },
        methods: {
          select(id) {
            console.log('seelect:', id);
            if (id) {
              this.$emit('toSelect', id);
            }
          }
        },
        mounted() {
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .divider
      divider()
      margin-left vw(33)
      width vw(284)
    .slide-fade-enter-active, .slide-fade-leave-active {
        transition: all 0.2s;
    }

    .slide-fade-enter, .slide-fade-leave-to {
        height: 0
    }

    .slide-fade-enter-to, .slide-fade-leave {
        height: vw(130)
    }

    .p1 {
        word-vw(14, second-ash)
    }

    .p2 {
        word-vw(14, third-ash)
    }

    .main {
        width 100%;
        flex-x();
        padding 0 6vw;
        height: vw(74);
        background #fff;
        box-sizing: border-box;
        border-radius vw(5)

        .item2 {
            flex-y();
            height 16vw
            justify-content space-around;
            align-items flex-end;
            & p {
                line-height 1.2
            }
        }
        & img {
            width: vw(55px)
            height: vw(55px)
        }
    }
    .item1 {
      flex-x();
      align-items flex-start;
      padding-left 3vw
      justify-content space-around
      margin-left vw(-49)
    }
    .main1 {
        width 100%;
        flex-x();
        height: vw(40);
        background #fff;
        box-sizing: border-box;
        .item-l {
            width: 30vw
            padding-left 23vw
        }
        .item-r {
            width: 50vw
            flex-x();
            span {
                width: 0
                height: 0
                &.up {
                    border-color: transparent transparent third-ash transparent;
                    margin-top -6px
                }
                &.down {
                    border-color: third-ash transparent transparent transparent;
                    margin-top 6px
                }
            }
            .order {
                width: vw(94)
                height: vw(40)
                line-height vw(40)
                background main-color
                word-vw(14, white);
            }
        }
        & img {
            width: vw(55px)
            height: vw(55px)
        }
    }

    .grade
      height: vw(35)
      flex-x()
      word-vw(14, third-ash)
      line-height vw(19)

    .out
      width vw(345)

    .icon-shangji{
      width vw(22)
      height vw(22)
      overflow: hidden
      margin-left vw(54)
      fill #c8c8c8
    }

    .button_sp {
        word(14px, #fff);
        background gradient-color;
        height: vw(40px);
        width: vw(83px);
        flex-y();
        justify-content center;
    }

    .button_out {
        flex-x();
        justify-content flex-end
    }

    .main_d {
        li {
            div{
                padding 0 6vw 0 23vw
                flex-x();
                height vw(32px);
                bor-t(bk-color, 1px);
                background bk-color;
                & p {
                    word(14px, #666);
                }
            }
        }
    }

    .space {
        space()
    }

    .inter {
        flex-y();
        box-sizing: border-box;
        width vw(345)
        margin-left vw(15)
        justify-content flex-start
        align-items stretch;
        border-radius vw(5)
    }

    .sort {
        transform: rotate(180deg);
    }

    .icon {
        width: 3vw
    }

    .min_s {
        word(13px, #666)
    }

    .min_sp {
        word(16px, #666)
    }

    .main_t {
        word(16px, #000)
    }
   .select {
     position: absolute
     width vw(260)
     height vw(45)
     right 0
   }
  .down
    position absolute
    left vw(91)
  .id
    position absolute
    left vw(223)

  .icon-right
    position absolute
    width vw(11)
    height vw(11)
    overflow: hidden
    right vw(25)
    margin-top vw(15)
    fill #c8c8c8
</style>
